<template>
  <div class="ui container">
    <div class="ui segment">
      <h3 class="ui teal header left aligned">我的信息</h3>
      <el-divider></el-divider>
      <div class="ui left aligned container">
        <el-form class="margin_big" size="mini" label-width="8em">
          <el-form-item label="昵称：">
            <el-col :span="8">
              <el-input placeholder="请输入昵称" v-model="nameInput" size="mini">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="手机号：">13568387255</el-form-item>
          <el-form-item label="居住地：">重庆市</el-form-item>
          <el-form-item label="邮箱：">
            <el-col :span="8">
              <el-input placeholder="请输入昵称" v-model="emailInput" size="mini">
              </el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="text" v-if="this.emailInput==''" @click="submitEmail" style="margin-left: 0.5rem;">绑定</el-button>
              <el-button type="text" v-else @click="submitEmail" style="margin-left: 0.5rem;">修改</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="我的签名：">
            <el-input type="textarea" placeholder="设置你的签名..." v-model="textarea" maxlength="50" show-word-limit
              size="medium">
            </el-input>
          </el-form-item>
          <el-form-item label="性别：">男</el-form-item>
          <el-form-item label="出生日期：">
            <div class="block">
              <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" size="mini">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-form>
        <div class="centerButton">
          <sui-button circular color="teal" content="修改信息" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject:['reload'],
  data() {
    return {
      dateValue: '2002-3-9',
      textarea: '这个人很懒，什么都没有留下...',
      nameInput: 'coolBoy',
      emailInput: '',
    }
  },
  methods: {
    submitEmail() {
      this.$prompt('请输入您的邮箱', '绑定邮箱', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });         //发送邮箱开始加载
        this.$https({
          method: 'get',
          url: '/user/sendEmail',
          params: {
            email: value
          }
        }).then(res => {
          loading.close();    //接收到res后停止
          if (res.data.code == 200) {
            this.$prompt('', '请输入验证码', {
              message: '我们已经将验证码发到您的邮箱：' + value,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /^[0-9a-zA-Z]{6}/,
              inputErrorMessage: '验证码格式不正确',
              showClose: false
            }).then(({ value }) => {
              this.$https({
                method: 'post',
                url: '/user/bindEmail',
                params: {
                  code: value
                }
              }).then(resp => {
                if (resp.data.code == 200)
                  this.$message.success(resp.data.data);
                else
                  this.$message.info(res.data.data);
                this.reload();
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '取消绑定'
              });
            });
          } else {
            this.$message.info(res.data.data);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消绑定'
        });
      });
    },
    getEmail(){
      this.$https.get('/user/email').then(resp=>{
        if(resp.data.code == 200)
          this.emailInput = resp.data.data;
        else
          this.$,message.info(resp.data.data);
      })
    }
  },
  mounted () {
    this.getEmail();
  }
}
</script>

<style scoped>
.margin_big {
  margin: 5em 2em 5em 2em !important;
}

.centerButton {
  text-align: center;
}
</style>